<template>
	<div class="area-wrap area-bottom" >
		<van-nav-bar
		  :title="msg=='goods_jfzq'?'花朵专区':msg=='device'?'收银设备':'无忧私域'"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		<!-- 轮播区 -->
	<div style="background: #fff;">
		<van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
		  <van-swipe-item
		  v-for="(item, index) in bannerList"
		  :key="index"
		  @click="handleToParams(item)"
		  >
			  <img class="banner-li" :src="item.image_url" alt="">
		  </van-swipe-item>
		</van-swipe>
	</div>
		
		<!-- 筛选区 -->
		<div class="tab-ul"style="background: #fff;" >
			<div @click="handleToCurrent(0)" :class="['tab-li', current === 0 ? 'on' : '']" >全部</div>
			<div @click="handleToCurrent(1)" :class="['tab-li', current === 1 ? 'on' : '']" >销量</div>
			<div @click="handleToCurrent(2)" :class="['tab-li', current === 2 ? `on ${sortStatus}` : 'default']" >价格</div>
		</div>
		
		<!-- 商品列表 -->
		<van-list
		  v-model="loadingPage"
		  :finished="finished"
		  :finished-text="list.length ? '没有更多了' : ''"
		  @load="ajaxGoodList"
		>
		
			<div v-if="finished && !list.length" class="empty-good" >
				<van-empty description="暂无商品" />
			</div>
			
			<!-- 商品列表 -->
			<div class="good-ul" >
				<good-item-select
				v-for="(item, index) in list"
				:key="index"
				:item="item"
				:msg="msg"
				/>
			</div>
		
		</van-list>
		
		
	</div>
</template>

<script>
	import goodItemSelect from './components/good-item-select';
	import { CONFIG_DATA, GOOD_LIST } from '@/api/home';
	import { bannerToParams } from '@/tool/methods';
	export default {
		components: {
			goodItemSelect
		},
		data() {
			return {
				type: '',
				current: 0,
				bannerList: [],
				sortStatus: 'default',

				// 分页
				page: 1,
				pageSize: 20,
				list: [],
				loadingPage: false,
				finished: false,
				msg:this.$route.query.msg
			}
		},
		created() {
			this.type = this.$route.query.type;
			this.getBanner();
		},
		mounted() {
			document.title = this.msg=='goods_jfzq'?'花朵专区':this.msg=='device'?'收银设备':'无忧私域'
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			// 轮播跳转
			handleToParams(item) {
				bannerToParams(item)
			},
			handleToCurrent(index) {
				if(this.current == index && (index == 0 || index == 1)) {
					return
				}
				
				// 自身时,有排序则改变
				if(this.current == index && index == 2) {
					if(this.sortStatus == 'default') {
						this.sortStatus = 'sortDown';
					}else if(this.sortStatus == 'sortDown') {
						this.sortStatus = 'sortUp';
					}else if(this.sortStatus == 'sortUp') {
						this.sortStatus = 'default';
					}
				}
				
				this.current = index;
				
				
				// 数据请求
				this.resetInit();
			},
			resetInit() { //重置
			  this.page = 1;
			  this.list = [];
			  this.finished = false;
			
			  this.loadingPage = true;
			  this.ajaxGoodList()
			},
			// 轮播图
			getBanner() {
				this.$http.get(CONFIG_DATA, {
					params: {
						key:this.msg=='goods_jfzq'?'banner_jfzq':this.msg=='device'?'banner_voice_device':'banner_syzq'
					}
				})
				.then(res => {
					const {
						data
					} = res;

					this.bannerList = data || [];
				})

			},
			// 列表请求
			ajaxGoodList() {
				let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;
				if(this.msg === 'goods_jfzq') {
				params['type'] = 12;
				}else if(this.msg === 'device') {
					params['type'] = 11;
				}else {
					params['type'] = 10;
				}
				
				
				if(this.current === 0) {
					params['sort_type'] = 1;
				}else if(this.current === 1) {
					params['sort_type'] = 2;
				}else if(this.current === 2) {
					params['sort_type'] = 4;
				}
				
				if((this.current == 2) && this.sortStatus != 'default') {
					if(this.sortStatus == 'sortUp') {
						params['sort_rule'] = 1;
					}else if(this.sortStatus == 'sortDown') {
						params['sort_rule']= 0;
					}
 				}
				
				this.$http.post(GOOD_LIST, params)
				.then(res => {
				  const {
				    list
				  } = res.data;
				
				  if(list && list.length) {
				     this.page++;
				     this.list = this.list.concat(list);
				     // 加载状态结束
				     this.loadingPage = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.area-wrap{
		min-height: 100vh;
		padding-top: 46px;
		// background-color: #fff;
		background-color: #F5F5F5;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.my-swipe{
			width: 7.02rem;
			margin: auto;
			.banner-li{
				display: block;
				width: 7.02rem;
				height: 2.8rem;
			}
		}
		
		.tab-ul{
			display: flex;
			height: 0.8rem;
			padding-top: 0.1rem;
			.tab-li{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.28rem;
				font-weight: 400;
				font-size: 0.32rem;
				color: #999999;
				&.on{
					font-weight: 500;
					font-size: 0.32rem;
					color: #F32A23;
				}
				&.default{
					&::before{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0.1rem;
						margin: auto;
						width: 0.14rem;
						height: 0.2rem;
						background: url('../../images/sort-default.png') no-repeat center;
						background-size: cover;
					}
				}
				&.sortDown{
					&::before{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0.1rem;
						margin: auto;
						width: 0.14rem;
						height: 0.2rem;
						background: url('../../images/sort-down.png') no-repeat center;
						background-size: cover;
					}
				}
				&.sortUp{
					&::before{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0.1rem;
						margin: auto;
						width: 0.14rem;
						height: 0.2rem;
						background: url('../../images/sort-up.png') no-repeat center;
						background-size: cover;
					}
				}
			}
		}
		
		
		.good-ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
			padding: 0 0.24rem;
			
		}
	}
</style>